import FcDesigner from "./components/FcDesigner.vue";
import DragTool from "./components/DragTool.vue";
import Struct from "./components/Struct.vue";
import Fetch from "./components/Fetch.vue";
import Validate from "./components/Validate.vue";
import DragBox from "./components/DragBox.vue";
import Required from "./components/Required.vue";
import HtmlEditor from "./components/HtmlEditor.vue";
import FnConfig from "./components/FnConfig.vue";
import FnEditor from "./components/FnEditor.vue";
import TableOptions from "./components/TableOptions.vue";
import { designerForm } from "./utils/form";
import FcEditor from "@form-create/component-wangeditor";
import draggable from "vuedraggable/src/vuedraggable";
import unique from "@form-create/utils/lib/unique";
import { compareVersion, makeOptionsRule } from "./utils/index";
import formCreate from "./utils/form";
import globalUseLocale, { t } from "./utils/locale";
import TableFormView from "./components/tableForm/TableFormView.vue";
import TableForm from "./components/tableForm/TableForm.vue";
import TableFormColumnView from "./components/tableForm/TableFormColumnView.vue";
import ColorInput from "./components/ColorInput.vue";
import "./style/index.css";
import "./style/icon.css";

const addComponent = (id, component, previewComponent) => {
  designerForm.component(id, previewComponent || component);
  formCreate.component(id, component);
};

designerForm.component("draggable", draggable);
designerForm.component("DragTool", DragTool);
designerForm.component("DragBox", DragBox);
designerForm.component("HtmlEditor", HtmlEditor);
designerForm.component("FnConfig", FnConfig);
designerForm.component("FnEditor", FnEditor);

designerForm.component("Validate", Validate);
designerForm.component("Struct", Struct);
designerForm.component("TableFormColumn", TableFormColumnView);
designerForm.component("Fetch", Fetch);
designerForm.component("Required", Required);
designerForm.component("TableOptions", TableOptions);
designerForm.component("ColorInput", ColorInput);
addComponent("FcEditor", FcEditor);
addComponent("TableForm", TableForm, TableFormView);

designerForm.register("_fc", {
  load(fc, rule) {
    rule._id = unique();
  },
});

designerForm.register("_fc_tool", {
  load(_, rule) {
    rule.props.unique = unique();
  },
});

const install = function (Vue) {
  Vue.component("FcDesigner", FcDesigner);
};

FcDesigner.install = install;
FcDesigner.makeOptionsRule = makeOptionsRule;
FcDesigner.formCreate = formCreate;
FcDesigner.designerForm = designerForm;
FcDesigner.component = addComponent;
FcDesigner.useLocale = globalUseLocale;
FcDesigner.t = t;

if (compareVersion("3.1.27", formCreate.version) === 1) {
  console.warn(
    "Please use FormCreate version 3.1.27 or greater, see https://gitee.com/dotor-ww/arco-design-designer."
  );
}

export default FcDesigner;

export { formCreate, designerForm, install };
